<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
</head>
<body>

<view class="weui-search-bar" 
        style="
  position: relative;
  padding: 0px 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  border-top: 1rpx solid #D7D6DC;
  border-bottom: 1rpx solid #D7D6DC;">

 <view class="weui-search-bar__form"
            style="
    position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;">
            <!-- 搜索框 -->
<view class="weui-search-bar__box" 
style="position: relative;
  padding-left: 0px;
  box-sizing: border-box;
  z-index: 1;">             
<icon class="weui-icon-search_in-box" style=" position: absolute;text-align: center;
  left: 0px;
  top: 10px;" type="search" size="14"></icon>

<input type="text"  id="myInput" style="width: 70%; height: 28px;
  line-height: 28px;padding: 0px 0px;
  font-size: 14px;" placeholder="请输入搜索内容"/>
   <button style="font-size: 14px;" onclick= "document.getElementById('myInput').value = ''"> 
            清除
        </button> 
                </view>
            </view>
        </view>
<div class="nav" 
style="scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
    width: 100%;
    height: 50px;
    line-height: 50px;
    /*段落中文本不换行*/
    white-space: nowrap;
    /*设置横向滚动*/
    overflow-x: scroll;
    /*禁止纵向滚动*/
    overflow-y: hidden;
    /*文本平铺*/
    text-align: justify;
    padding: 0px 5px;
    margin-bottom: 10px;
    /*设置边距改变效果为内缩*/
    box-sizing: border-box;">
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">综合</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">电影</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">网络</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">新闻</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">省钱</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">社区</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">职场</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">育儿</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">阅读</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">直播</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">工具</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">游戏</a>
    <a style="color: #505050;
    text-decoration: none;
    margin: auto 10px;" href="#">娱乐</a>
</div>
<div>test</div>
</body>
</html>